<template>
	<view style="">
		<view>
			<!-- #ifndef H5 -->
			<view style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background: #fff;">
			<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="position: fixed;top: 44px;left: 0;right: 0;z-index: 99;background: #fff;">
				<!-- #endif -->
					<view class="bg padding-lr padding-tb-sm flex align-center">
						<u-search @change="search" v-model="goodsName" placeholder="搜索服务名称" bg-color="#F7F7F7"
							style="width: 100%;" shape="square" :show-action="false"></u-search>
					</view>
					<view class="flex bg">
						<view v-for="(item,index) in tab" :key="index" class="flex-sub boxIndex"
							:class="tabIndex == index?'tans':''"
							:style="index==1?'text-align:center':(index==2?'text-align:right;margin-right:40rpx':'')"
							style="position: relative;padding-left: 40rpx;" @click="bindindex(index)">
							{{item.name}}
							<view :class="index==0?'tabse':(index==1?'tabse1':'tabse2')" v-show="tabIndex == index">

							</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="flex align-center padding-sm"
						style="height: 100rpx;width: 100%;white-space: nowrap">
						<view v-for="(item,index) in list" :key="index" class="boxs"
							:class="counts == index?'actives':''" @click="bindTabs(index,item)">{{item.name}}
						</view>
					</scroll-view>
				</view>
				<!-- #ifdef H5 -->
				<view style="margin-top: 155px;" v-if="goodsList.length>0">
				<!-- #endif -->
					<!-- #ifndef H5 -->
					<view style="margin-top: 290upx;padding-bottom: 120rpx;" v-if="goodsList.length>0">
					<!-- #endif -->
						<u-checkbox-group class="flex justify-center flex-wrap">
							<view class="bg radius" style="width: 686rpx;margin-top: 20rpx;"
								v-for="(item,index) in goodsList" :key='index'>
								<!-- <view class="padding-sm" style="position: relative;">
									</u-checkbox>
									创建时间：{{item.createTime}}
									
								</view> -->
								<!-- <view style="width:100%;border-top: 1upx solid #E6E6E6;"></view> -->
								<view class="flex padding" @click="goDet(item)">
									<view>
										<image :src="item.img?item.img:'../../static/logo.png'" class="radius"
											style="width:210upx;height:170upx;"></image>
									</view>
									<view class="margin-left flex flex-direction justify-between">
										<view class="text-lg text-bold">{{item.serviceName}}</view>
										<view class="margin-tb-xs u-line-2" style="color:#999999;">
											{{item.serviceDescribe}}
										</view>
										<view style="width: 414rpx;" class="text-lg flex justify-between align-center">
											<view class="">
												<text class="text-sm">￥</text>{{item.money}}
											</view>
											<!-- <view style="margin-right: 10rpx;">库存：{{item.inventory?item.inventory:'0'}}
											</view> -->
										</view>
									</view>
								</view>
								<view style="width: 686upx;height: 1upx;border: 1upx solid #E6E6E6;margin:0 auto;">
								</view>
								<view class="flex justify-between padding align-center" style="position: relative;">
									<span style="position: absolute;right: 20rpx;">
										<u-switch v-model="item.isEnable" active-color="#17cd8a" inactive-color="#eee"
											size="40" @change="changeKg(index,item)"></u-switch>
									</span>
									<!-- <view>库存：{{item.inventory?item.inventory:'0'}}</view> -->
									<view class="flex align-center " style="width: 100%;justify-content: start;">
										<view @click="goodupdete(item)" class="btn margin-right-sm">删除</view>
										<view @click="goUpdate(item)" class="btn">修改</view>
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</view>
					<!-- <view class="addguige text-bold" @click="goAdd()">添加服务</view> -->
					<empty v-if="goodsList.length == 0"></empty>
				</view>
				<view class="selectcz flex align-center">
					<!-- <u-checkbox @change="checkboxChanges()" style="margin-left: 40rpx;"
						v-model="checkedz">全选</u-checkbox> -->
					<!-- <view class="addguige text-bold addguigezz" @click="selectczan">操作</view> -->
					<view class="addguige text-bold addguigezzs" @click="goAdd()">添加服务</view>
				</view>




			</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				goodsIds: [],
				shows3: false,
				paixu: 0,
				shows2: false,
				typeperature2: '',
				checkedz: false,
				show: false,
				lists: [{
					text: '批量下架'
				}, {
					text: '修改库存'
				}, {
					text: '批量删除'
				}],
				lists1: [{
					text: '批量上架',
				}, {
					text: '修改库存'
				}, {
					text: '批量删除'
				}],
				tab: [{
					type: '',
					name: '全部',
				}, {
					type: 1,
					name: '上架中',
				}, {
					type: 0,
					name: '已下架',
				}],
				tabIndex: 0,
				list: [{
					type: '',
					name: '全部',
				}],
				counts: '',
				classifyId: '',
				page: 1,
				limit: 10,
				shopId: '',
				goodsName: '',
				goodsList: [],
				totalCount: 0,
				shows: false,
				typeperature: '',
				goodsId: '',
				checked: false,
				pageList: [],
				closeable: true,
				modularId: '',
				isEnable: '',
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中......',
				icon: 'loading'
			})

			// this.shopId = option.shopId
			// this.shopId = this.$queue.getData("shopId")
			this.getClassifyList()

		},
		onShow() {
			this.getGoodsList()
		},
		methods: {



			//修改商品
			goUpdate(item) {
				let data = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: '/my/publish/goods?data=' + data
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/my/publish/goods'
				})
			},
			//搜索
			search() {
				this.getGoodsList()
			},
			bindindex(index) {
				uni.showLoading({
					title: '加载中......',
					icon: 'loading'
				})

				this.isEnable = this.tab[index].type
				this.page = 1
				this.tabIndex = index
				this.getGoodsList()
			},
			getGoodsList() {
				let data = {
					page: this.page,
					limit: this.limit,
					serviceName: this.goodsName, //服务名称
					modularId: this.modularId, //服务类型 就医陪诊1 院内陪护2 优享陪诊3
					isEnable: this.isEnable, //状态 下架0 上架1
				}
				this.$Request.getA("/admin/hospitalEmploy/getHospitalEmployList", data).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.records.length > 0) {
							if (this.page == 1) {
								this.goodsList = res.data.records
							} else {
								this.goodsList = [...this.goodsList, ...res.data.records]
							}
						} else {
							if (this.page == 1) {
								this.goodsList = []
							} else {
								this.goodsList = this.goodsList
							}

						}


					}
					uni.stopPullDownRefresh();
					uni.hideLoading()
				});
			},
			//删除商品
			goodupdete(e) {
				console.log(e)
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除当前服务吗？刪除后无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确定", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							let data = {
								'serviceId': e.serviceId
							}
							that.$Request.postA("/admin/hospitalEmploy/deleteHospitalEmploy", data).then(
							res => {
								if (res.code == 0) {
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
									that.page = 1
									that.getGoodsList();
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else {

						}
					}
				})

			},


			//获取服务分类
			getClassifyList() {
				let that = this
				let data = {
					page: 1,
					limit: 100
				}
				this.$Request.getA("/admin/hospitalModular/getModularList", data).then(res => {
					console.log(res);
					if (res.code == 0) {
						res.data.records.forEach(it => {

							let arr = {
								type: it.modularId,
								name: it.modularName,
							}
							if (it.isEnable == 1) {
								this.list.push(arr)
							}
						})

					}
				});
			},



			goDet(e) {
				let data = encodeURIComponent(JSON.stringify(e))
				uni.navigateTo({
					url: '/my/store/goodDetail?data=' + data
				})
			},
			bindDetail() {
				uni.navigateTo({
					url: './goodDetail'
				})
			},
			bindTabs(index, e) {
				uni.showLoading({
					title: '加载中......',
					icon: 'loading'
				})
				this.counts = index
				this.modularId = e.type
				this.page = 1
				this.getGoodsList()
			},

			// 上下架服务
			changeKg(index, row) {
				console.log(row)
				var datas = {}
				datas.goodsIds = row.goodsId
				if (row.status == 0) {
					datas.status = 1
				}
				if (row.status == 1) {
					datas.status = 0
				}

				this.$Request.getT("/admin/goods/updateBatchStatus", datas).then(res => {
					if (res.code == 0) {
						this.page = 1
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getGoodsList()
					}
				});
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getGoodsList();
			if (this.totalCount == this.goodsList.length) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getGoodsList();
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background: #EDF1F7;
	}

	.selectcz {
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		z-index: 9;
	}

	.tabse {
		width: 50rpx;
		height: 10rpx;
		background-color: #468EF8;
		position: absolute;
		bottom: 0;
		left: 45%;
		transform: translate(-100%, -100%);
	}

	.tabse1 {
		width: 50rpx;
		height: 10rpx;
		background-color: #468EF8;
		position: absolute;
		bottom: 0;
		left: 70%;
		transform: translate(-100%, -100%);
	}

	.tabse2 {
		width: 50rpx;
		height: 10rpx;
		background-color: #468EF8;
		position: absolute;
		bottom: 0;
		left: 95%;
		transform: translate(-100%, -100%);
	}

	.bg {
		background: #FFFFFF;
	}

	.boxs {
		width: 150upx;
		height: 55upx;
		border: 2upx solid #CCCCCC;
		border-radius: 28upx;
		text-align: center;
		line-height: 55upx;
		color: #999999;
		margin-right: 30rpx;
		display: inline-block;
	}

	.actives {
		width: 150upx;
		height: 55upx;
		border: 2upx solid #468EF8;
		border-radius: 28upx;
		text-align: center;
		line-height: 55upx;
		color: #000000;
		margin-right: 30rpx;
	}

	.btn {
		width: 120upx;
		height: 64upx;
		border: 2upx solid #999999;
		border-radius: 8upx;
		text-align: center;
		line-height: 64rpx;
		color: #000000;
	}

	.box {
		width: 131upx;
		height: 45rpx;
		background: #FFEAF0;
		border-radius: 4upx;
		text-align: center;
		line-height: 45rpx;
		font-size: 24upx;
		font-weight: 500;
		color: #FE215B;
	}

	.page-box {
		position: relative;
		// left: 0;
		height: 100vh;
		z-index: 0;
		top: -20px;
	}

	.centre {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 400rpx;
		text-align: center;
		// padding: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 387rpx;
			height: 341rpx;
			// margin-bottom: 20rpx;
			margin: 0 auto 20rpx;
			// border: 1px dotted #000000;
		}

		.tips {
			font-size: 32rpx;
			color: #2F3044;
			margin-top: 20rpx;
			font-weight: 700;
		}

		.btn {
			margin: 80rpx auto;
			width: 600rpx;
			border-radius: 32rpx;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			background: #5074FF;
		}
	}

	.boxIndex {
		height: 78upx;
		line-height: 78upx;
	}

	.tans {
		background: #fff;
	}

	.addguige {
		width: 100%;
		color: #ffffff;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
	}

	.addguigezz {
		border-radius: 16upx 0 0 0;
		background-color: #999999;
		box-shadow: 0px 10upx 20upx 0px #999999;
	}

	.addguigezzs {
		border-radius: 0 16upx 0 0;
		background: #468EF8;
		box-shadow: 0px 10upx 20upx 0px #468EF8;
	}

	.addguiges {
		width: 90%;
		margin: 0 auto;
		background: #468EF8;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		/* position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0; */

	}
</style>